<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../styles/app.css"/>
    <link rel="stylesheet" href="../../../../build/css/onsenui.css">
    <link rel="stylesheet" href="../../../../build/css/onsen-css-components.css">

    <script src="../../../../build/js/onsenui.js"></script>
    <script src="../../node_modules/angular/angular.js"></script>
    <script src="../../dist/angularjs-onsenui.js"></script>
    <script src="../app.js"></script>

  </head>

  <body>
    <ons-tabbar position="top" var="tabbar">
      <ons-tab page="page1.html" icon="ion-ios-home" active="true"></ons-tab>
      <ons-tab icon="ion-ios-chatboxes" page="page2.html"></ons-tab>
      <ons-tab icon="ion-ios-cog" page="page3.html"></ons-tab>
    </ons-tabbar>

    <ons-template type="text/ons-template" id="page1.html">
      <ons-toolbar modifier="transparent">
        <div class="center">Page1</div>
      </ons-toolbar>
      <div style="text-align: center">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <br><br><br><br><br><br><br><br><br><br><br>
        <p>last</p>
      </div>
    </ons-template>

    <ons-template type="text/ons-template" id="page2.html">
      <ons-toolbar modifier="transparent">
        <div class="center">Page2</div>
      </ons-toolbar>
    </ons-template>

    <ons-template type="text/ons-template" id="page3.html">
      <ons-toolbar modifier="transparent">
        <div class="center">Page3</div>
      </ons-toolbar>
    </ons-template>
  </body>
</html>
